<style scoped lang="scss">


.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  .header-left {
      width: 50px; // 100px * 0.5
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  .header-center {
      width: 80px; // 160px * 0.5
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        font-size: 13px; // 26px * 0.5
      }
    }
  .header-right {
      width: 50px; // 100px * 0.5
      height: 100%;
    }
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
  .boxone {
      width: 100%;
      height: 130px; // 260px * 0.5
      margin-bottom: 6px; // 12px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    .user {
        width: 90%;
        height: 70px; // 140px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .user-left {
          width: 70px; // 140px * 0.5
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: 14px; // 28px * 0.5
            color: #717171;
          }
        }
       .user-right {
          width: 70px; // 140px * 0.5
          height: 70px; // 140px * 0.5
          display: flex;
          justify-content: center;
          align-items: center;
        }
       .userimg {
          width: 50px; // 100px * 0.5
          height: 50px; // 100px * 0.5
          border-radius: 50%;
        }
      }
    .name {
        width: 90%;
        height: 60px; // 120px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .name-left {
          width: 70px; // 140px * 0.5
          height: 60px; // 120px * 0.5
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: 13.5px; // 27px * 0.5
            color: #717171;
          }
        }
       .name-right {
          height: 60px; // 120px * 0.5
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            margin-right: 6px;
            font-size: 14px;
            color: #717171;
          }
        }
      }
    }
  .boxtwo {
      width: 100%;
      height: 130px; // 260px * 0.5
      margin-bottom: 5px; // 10px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    .sex {
        width: 90%;
        height: 60px; // 120px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .sex-left {
          width: 70px; // 140px * 0.5
          height: 55px; // 110px * 0.5
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: 13.5px; // 27px * 0.5
            color: #717171;
          }
        }
       .sex-right{
          width: 50px; // 100px * 0.5
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    .tizheng {
        width: 90%;
        height: 75px; // 150px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .tizheng-left {
          width: 70px; // 140px * 0.5
          height: 70px; // 140px * 0.5
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            font-size: 13px; // 26px * 0.5
            color: #717171;
          }
        }
       .tizheng-right {
          width: 160px; // 320px * 0.5
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
         .contizheng {
            width: 150px; // 300px * 0.5
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
           .conone {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 13px; // 26px * 0.5
              color: #717171;
            }
          }
        }
      }
    }
  .boxthree {
      width: 100%;
      height: 105px; // 210px * 0.5
      margin-bottom: 5px; // 10px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    .three-one {
        width: 90%;
        height: 45px; // 90px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .pone {
          margin-left: 22px; // 44px * 0.5
          font-size: 13.5px; // 27px * 0.5
          color: #717171;
        }
       .ptwo {
          font-size: 13.5px; // 27px * 0.5
          color: #717171;
        }
      }
    .three-two {
        width: 90%;
        height: 60px; // 120px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .wxone {
          margin-left: 20px; // 40px * 0.5
          display: flex;
          font-size: 13px; // 26px * 0.5
          justify-content: center;
          align-items: center;
          color: #717171;
        }
       .wxright {
          width: 70px; // 140px * 0.5
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
  .boxfour {
      width: 100%;
      height: 100px; // 200px * 0.5
      margin-bottom: 5px; // 10px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
    .four-one {
        width: 90%;
        height: 45px; // 90px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .fourone-left{
          margin-left: 20px; // 40px * 0.5
          p{
            font-size: 13px; // 26px * 0.5
            color: #717171;
          }
        }
       .fourone-right{
          width: 60px; // 120px * 0.5
          display: flex;
          margin-right: 6.5px; // 13px * 0.5
          justify-content: space-between;
          align-items: center;
          p{
            color: #717171;
          }
        }
      }
    .four-two{
        width: 90%;
        height: 55px; // 110px * 0.5
        border-bottom: 0.5px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
       .fourtwo-left{
          margin-left: 20px; // 40px * 0.5
          p{
            font-size: 13px; // 26px * 0.5
            color: #717171;
          }
        }
       .fourtwo-right{
          width: 60px; // 120px * 0.5
          display: flex;
          margin-right: 6.5px; // 13px * 0.5
          justify-content: space-between;
          align-items: center;
          p{
            color: #717171;
          }
        }
      }
    }
   .boxlast{
      width: 100%;
      flex: 1;
      background-color: #fff;
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <van-icon @click="onClickLeft" style="font-size: 35px" name="arrow-left" />
      </div>
      <div class="header-center">
        <p>个人信息设置</p>
      </div>
      <div class="header-right"></div>
    </header>
    <main>
      <div class="boxone">
        <div class="user">
          <div class="user-left">
            <p>头像</p>
          </div>
          <div class="user-right">
            <div class="userimg">
              <img
                style="width: 100%; height: 100%; border-radius: 50%"
                :src="headPic"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="name" @click="nickname">
          <div class="name-left">
            <p>昵称</p>
          </div>
          <div class="name-right">
            <p>{{ namevalue }}</p>
            <van-icon style="font-size: 28px; color: #717171" name="arrow" />
          </div>
        </div>
      </div>
      <div class="boxtwo">
        <div class="sex" @click="xgsex">
          <div class="sex-left">
            <p>性别</p>
          </div>
          <div class="sex-right">
            <!-- <img src="../../assets/images/icon/common resource/xxhdpi/common_icon_boy_n.png" alt=""> -->
            <p style="font-size: 26px;color: #717171;">{{ sexvalue ? sexvalue : '男' }}</p>
            <van-icon style="font-size: 28px; color: #717171" name="arrow" />
          </div>
        </div>
        <div class="tizheng" @click="tizheng">
          <div class="tizheng-left">
            <p>体征</p>
          </div>
          <div class="tizheng-right">
            <div class="contizheng">
              <div class="conone">
                <p>身高</p>
                <p>{{ height }}cm</p>
              </div>
              <div class="conone">
                <p>体重</p>
                <p>{{ weight }}kg</p>
              </div>
              <div class="conone">
                <p>年龄</p>
                <p>{{ agevalue }}</p>
              </div>
            </div>
            <van-icon style="font-size: 28px; color: #717171" name="arrow" />
          </div>
        </div>
      </div>
      <div class="boxthree">
        <div class="three-one">
          <p class="pone">邮箱</p>
          <p class="ptwo">{{ localEmail }}</p>
        </div>
        <div class="three-two">
          <p class="wxone">绑定微信</p>
          <div class="wxright">
            <p style="color: #717171">去绑定</p>
            <van-icon style="font-size: 28px; color: #717171" name="arrow" />
          </div>
        </div>
      </div>
      <div class="boxfour">
        <div class="four-one" @click="gorz">
          <div class="fourone-left">
            <p>实名认证</p>
          </div>
          <div class="fourone-right">
            <p>去认证</p>
            <van-icon style="font-size: 28px; color: #717171" name="arrow" />
          </div>
        </div>
        <div class="four-two">
          <div class="fourtwo-left">
            <p>银行卡绑定</p>
          </div>
          <div class="fourtwo-right">
            <p  @click="bound_bank">{{ bank_ocrResult?'已绑定':'去绑定'}}</p>
            <van-icon style="font-size: 28px; color: #717171" name="arrow" />
          </div>
        </div>
      </div>
      <div class="boxlast"></div>
    </main>
    <footer></footer>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()// 路由实例
const namevalue = ref(localStorage.getItem("userName"));
const sexvalue = ref(localStorage.getItem("gender"));
const agevalue = ref(localStorage.getItem("age") || "0");
const weight = ref(localStorage.getItem("weight") || "0");
const height = ref(localStorage.getItem("height") || "0");
const recognize = ref(localStorage.getItem('recognize'))
const localEmail = ref(localStorage.getItem("localEmail" || ""))
const headPic = ref(localStorage.getItem("headpic" || ""))
const bank_ocrResult = ref('')
const onClickLeft = () => {
  router.push('/setting')
}
const nickname = () => {
  router.push('/nickname')
}
const xgsex = () => {
  router.push('/xgsex')
}
const tizheng = () => {
  router.push('/xgtizheng')
}

const bound_bank = () => {
  if(bank_ocrResult.value) {
    router.push('/Bank_message')
  }else {
    router.push('/Bound_bank')
  }

}


const gorz=()=>{
   router.push('/authentication')
}

</script>
